<template>
	<div>



		<div v-for="sku_info in goods_list" class="popupSku" >

			<div style="font-weight: 800; margin: 5px;" >
				SPU名称：{{sku_info.sku_attribute.resultBody[0].spu_name}}</div>


			<van-row @click="popupAttribute(sku_info.sku_id)">
				<van-col span="8">
					<van-image style="" src="https://img01.yzcdn.cn/vant/ipad.jpeg" width="5rem" height="5rem"
						fit="contain">
						<template v-slot:error>加载失败</template>
					</van-image>

				</van-col>
				<van-col span="16">
					<div style="margin-top: 5px;">品牌：{{sku_info.sku_attribute.resultBody[0].brand_name}}</div>
					<div style="margin-top: 5px;"> 数量：{{sku_info.quantity}}
						{{sku_info.sku_attribute.resultBody[0].unit_name}}</div>
					<div style="margin-top: 5px;"> 货位：{{sku_info.location_name}}</div>

				</van-col>
			</van-row>


			<van-popup v-model="show">
				<div style="margin: 10px;">
					<div style="font-weight: 600;">属性：</div>
					<div v-for="attribute in sku_attribute_list" style="margin: 8px ;width: 160px;">
						{{attribute.attribute_key}} : {{attribute.attribute_value}}
					</div>

				</div>


			</van-popup>

		</div>
		
		
<!-- 		<van-swipe-cell>
		  <template #left>
		    <van-button square type="primary" text="选择" />
		  </template>
		  <van-cell :border="false" title="单元格" value="内容" />
		  <template #right>
		    <van-button square type="danger" text="删除" />
		    <van-button square type="primary" text="收藏" />
		  </template>
		</van-swipe-cell>
 -->


	</div>
</template>

<script>
	import {
		select_sku_account_by_odd_id_url,
		select_sku_url,
		select_sku_attribute_url,
	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {},
		props: ['odd_id'],
		data() {
			return {
				show: false,
				goods_list: [],
				// goods_list_: []
				sku_attribute_list: [],
			}
		},
		methods: {

			popupAttribute(sku_id) {
				console.log(sku_id)
				this.get_sku_attribute(sku_id)
				this.show = true

			},


			//获得指定sku_id的属性
			get_sku_attribute(sku_id) {

				this.$axios({
					method: 'GET',
					url: select_sku_attribute_url,
					params: {
						sku_id: sku_id
					}
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					let result = response.data.resultBody.reverse()

					this.sku_attribute_list = result
					console.log(result)

				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},


			get_goods(odd_id) {
				// this.goods_list = []
				this.$axios({
					method: 'GET',
					url: select_sku_account_by_odd_id_url,
					params: {
						odd_id: odd_id
					}
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					this.goods_list = response.data.resultBody.reverse()

					console.log(this.goods_list)


					// console.log(this.ancestor_list)
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			}
		},
		computed: {},
		watch: {
			// odd_id: (newVal,oldVal) => { //不要写成这样，会报错
			odd_id: function(newVal, oldVal) {

				this.get_goods(newVal)
			}
		},
		created() {},
		mounted() {

			this.get_goods(this.odd_id)

		},
	}
</script>

<style scoped lang="less">

</style>
